{% extends 'base.html' %}

{% block header %}
  <h1>{% block title %}{{title}}{% endblock %}</h1>
{% endblock %}

{% block content %}
    <div id="city-form">
        <form>
            <label>Which city?</label>
            <input type="text" name="city" required />
            <input type="submit" value="GO" />
        </form>
    </div>
    {% if data %}
    <div class="col2">
        <table>
            <thead>
                <th>day</th>
                <th>temp night</th>
                <th>temp day</th>
                <th>weather</th>
                <th>wind speed</th>
                <th>direction</th>
            </thead>
            {% for day_forecast in data %}
            <tr>
                <td>{{ day_forecast.week_day }}</td>
                <td>{{ day_forecast.temp_night }}</td>
                <td>{{ day_forecast.temp_day }}</td>
                <td>{{ day_forecast.weather }}</td>
                <td>{{ day_forecast.wind_speed }}</td>
                <td>{{ day_forecast.wind_rose }}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
    <div class="col2">
        <img src="chart.png">
    </div>
    {% endif %}
{% endblock %}